<template>
  <div class="test">
    <el-form
      ref="dataForm"
      :model="testForm"
      :rules="dataRule"
      label-width="100px"
      class="search_container"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="测试环境" prop="environ">
            <el-select
              clearable
              v-model="testForm.environ"
              filterable
              placeholder="请选择"
              style="width: 200px; height: 40px"
            >
              <el-option
                v-for="item in environs"
                :key="item.id"
                :label="item.environmentName"
                :value="item.environmentUrl"
                @click.native.prevent="changeenviron(item)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-tabs
        type="border-card"
        v-model="editableTabsValue"
        @tab-click="tabclick"
      >
        <el-tab-pane label="案例选择">
          <el-row class="mt10">
            <el-table
              :data="multipleSelection"
              border
              style="width: 100%"
              @selection-change="caseChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="caseName"
                header-align="center"
                align="center"
                label="案例名称"
              >
              </el-table-column>
              <el-table-column
                prop="remark"
                header-align="center"
                align="center"
                label="备注"
              >
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="测试结果">
          <el-row class="mt10">
            <el-table
              :data="caseSelection"
              style="width: 100%"
              border
            >
              <el-table-column
                prop="caseName"
                header-align="center"
                align="center"
                label="案例名称"
                min-width="33%"
              >
              </el-table-column>
              <el-table-column
                prop="time"
                header-align="center"
                align="center"
                label="耗费时长(单位：毫秒)"
                min-width="33%"
              >
              </el-table-column>
              <el-table-column
                prop="result"
                header-align="center"
                align="center"
                label="结果"
                min-width="33%"
              >
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div class="content-footer">
        <el-button type="info" plain @click="testFormSubmit()">{{
          casetext
        }}</el-button>
        <el-button @click="testVisible()">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { batchTest, getenvironment } from "@/api/testCase/interfaceCase";
export default {
  data() {
    return {
      casetext: "测试",
      editableTabsValue: "0",
      testList: [], //测试结果
      caseList: [], //案列选择
      caseSelection: [],
      multipleSelection: [],
      environs: [],
      flows: [
        { label: "案例选择", value: "1" },
        { label: "测试结果", value: "2" },
      ],
      dataRule: {
        environ: [
          { required: true, message: "请选择测试环境", trigger: "change" },
        ],
      },
      testForm: {
        environ: "",
        flow: "",
        environmentCode:""
      },
    };
  },
  created() {
    // console.log("multipleSelection", this.$route.query.multipleSelection);
    this.multipleSelection = JSON.parse(this.$route.query.multipleSelection);
    this.envirData();
  },
  watch: {
    editableTabsValue: {
      handler: function (newVal) {
        if (newVal === "0") {
          this.casetext = "测试";
        } else if (newVal === "1") {
          this.casetext = "重新测试";
        }
      },
      deep: true,
    },
  },
  methods: {
    changeenviron(item) {
      // console.log(item,'item');
      this.testForm.environmentCode = item.environmentCode
    },
    tabclick() {
      // console.log();
    },
    // 获取环境信息地址
    envirData() {
      let params = {};
      getenvironment(params).then((res) => {
        this.environs = res.data.data;
      });
    },
    caseChange(val) {
      this.caseSelection = val;
      console.log(this.caseSelection);
    },
    testFormSubmit() {
      if (this.editableTabsValue === "1") {
        this.editableTabsValue = "0";
      } else {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            if (this.caseSelection.length) {
              if (this.editableTabsValue === "0") {
                this.editableTabsValue = "1";
              }
              let ids = [];
              this.caseSelection.forEach((e) => {
                ids.push(e.id);
              });
              let param = {
                ip: this.testForm.environ,
                ids: JSON.stringify(ids),
                environmentCode:this.testForm.environmentCode
              };
              // console.log();
              batchTest(param).then((res) => {
                // console.log(res);
                if (res.data.resultCode === 0) {
                  let data = res.data.data;
                  data.forEach((e, i) => {
                    this.$set(this.caseSelection[i], "time", e.time);
                    if (e.head.code === "0") {
                      this.$set(this.caseSelection[i], "result", "成功");
                    } else if (e.head.code === "1") {
                      this.$set(this.caseSelection[i], "result", "失败");
                    }
                  });
                  // console.log(this.caseSelection, "e");
                } else {
                  this.$message.error(res.data.resultMsg);
                }
              });
            } else {
              this.$message.error("请选择测试案列！");
            }
          }
        });
      }
    },
    testVisible() {
      this.$router.push({
        path: "/drools-testCase/interfaceCase/list",
      });
    },
  },
};
</script>

<style>
</style>